<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>xmap - WebGis 前端框架</title>
    <link href="emap.css" rel="stylesheet" type="text/css">
    <link rel='stylesheet' href='css.css'/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jsDraw2DX_Uncompressed.js"></script>
    <script type="text/javascript" src="emap.js"></script>

    <script src='spectrum/spectrum.js'></script>
    <link rel='stylesheet' href='spectrum/spectrum.css'/>
    <style>
        * {
            font-family: "微软雅黑";
            font-size: 12px;
        }
    </style>
    <script>

        var map;
        $(function () {
            //116.397496,39.908722 天安门
            //118.784523,32.046497 南京
            emap.init({
                lat: 32.060255,
                lon: 118.796877,
                zoom: 15,
                tilePixel: 256,
                LIMIT_MAX_ZOOM: 18,
                LIMIT_MIN_ZOOM: 3,
                baseDir: "",
                makePos: function (lat, lon) {
                    //-179.998627,85.05101
                    var posX = (lon + 180) / 360;
                    // 全球墨卡托投影计算  @see http://www.cnblogs.com/beniao/archive/2010/04/18/1714544.html
                    var posY =  0.5 - Math.log((1 + Math.sin(lat * Math.PI / 180)) / (1 - Math.sin(lat * Math.PI / 180))) / (4 * Math.PI) ;
                    return new emap.Position(posX, posY);
                },
                posToLatLon: function (posX, posY) {
                    var y = 0.5 - posY;
                    var lat = 90 - 360 * Math.atan(Math.exp(-y * 2 * Math.PI)) / Math.PI;
                    var lon = posX * 360 -180;
                    return {lat: lat, lon: lon};
                },
                getEdgeNum: function (zoom) {
                    zoom = zoom || this.zoom;
                    return Math.pow(2, zoom);
                },
                getTileUrl: function (x, y, zoom) {
                    var random = (x+y)%2+1;
                    return "http://webrd0"+random+".is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x="+x+"&y="+y+"&z="+zoom;
                }
            });
            map = new emap.Map({
                container: "maps",
                toolbar: "#tools"
            });
            
            map.draw();
            

            var marker;

            map.addEventListener(emap.events.MAP_CLICK, function(pos){
                map.removeMarker(marker);
                $("#latlon").val(pos.getLatLonString());
                var latLon = map.posToLatLon(pos.posX, pos.posY);
                marker = new emap.Marker({lat: latLon.lat, lon: latLon.lon});
                map.addMarker(marker);
                console.info(marker);
            });

            $("#search-btn").click(function () {
               var latlon = $("#latlon").val();
               map.removeMarker(marker);
               if(latlon){
                   var latlons = latlon.split(",");
                   var lat = parseFloat(latlons[1]);
                   var lon = parseFloat(latlons[0]);
                   map.moveTo(lat, lon, 15);
                   marker = new emap.Marker({lat: lat, lon: lon});
                   map.addMarker(marker);
               }
               
            });


            var graph = map.createGraph();
           // graph.showCenterCross();
            $("#startDraw").click(function () {
                var shape = $("#shape").val();
                var wight = $("#wight").val();
                var penColor = $("#penColor").val();
                var brush = $("#brush").val();
                var pen = new jxPen(new jxColor(penColor), wight);
                var b = null;
                if (brush) {
                    b = new jxBrush(new jxColor(brush));
                }
                graph.create({shape: shape,
                    pen: pen,
                    brush: b,
                    afterDrawing: function (shape, graph) {
                        console.info(shape);
                    }
                });
            });

          

        });

        function normalMap(){
            var layer1 = map.getLayer("earthTile");
            var layer2 = map.getLayer("earthTile2");
            if(layer1){
                layer1.hide();
                layer2.hide();
            }
            var defaultLayer = map.getLayer(emap.TileLayer.TAG);
            defaultLayer.show();
        }

        function earchMap(){

            var defaultLayer = map.getLayer(emap.TileLayer.TAG);
            defaultLayer.hide();
            var layer = new emap.TileLayer(map,{
                TAG:"earthTile",
                zIndex:20,
                 getTileUrl: function (x, y, zoom) {
                    var random = (x+y)%2+1;
                    return "http://webst0"+random+".is.autonavi.com/appmaptile?style=8&x="+x+"&y="+y+"&z="+zoom;
                }
            });
            var layer2 = new emap.TileLayer(map,{
                TAG:"earthTile2",
                zIndex:10,
                 getTileUrl: function (x, y, zoom) {
                    var random = (x+y)%2+1;
                    return "http://webst0"+random+".is.autonavi.com/appmaptile?style=6&x="+x+"&y="+y+"&z="+zoom;
                }
            });
            map.addLayer(layer);
            map.addLayer(layer2);
            layer.show();
            layer2.show();
        }
    </script>
</head>
<body>
<div id="maps" style="position: absolute;top: 0px;left: 0px;bottom: 0px;right: 0px;"></div>
<div id="tools" style="">
    <div style="height: 30px;background-color: #3d3d3d;color: #f5f5f5;padding: 3px; ">
        <span style="font-size: 14px;font-weight: bold;margin-left: 10px;">地图工具条</span>
        <span style="margin-left: 10px;">
            粗细：
            <select id="wight">
                <option value="1px">1px</option>
                <option value="2px" selected="selected">2px</option>
                <option value="3px">3px</option>
                <option value="5px">5px</option>
                <option value="8px">8px</option>
            </select>
            颜色：
            <input type='text' id="penColor" value="#f00"/>
            填充：
            <input type='text' id="brush"/>
            选择图形：
            <select id="shape">
                <option value="line" selected="selected">直线</option>
                <option value="rect">矩形</option>
                <option value="polyline">折线</option>
                <option value="polygon">多边形</option>
                <option value="circle">圆</option>
                <option value="ellipse">椭圆</option>
                <option value="curve">平滑曲线</option>
                <option value="closedcurve">闭合曲线</option>
                <option value="bezier">贝塞尔曲线</option>
            </select>
            <button id="startDraw">开始绘制</button>
           
            <span style="margin-left:10px;">坐标拾取：<input type="text" id="latlon" style="width:150px;"></span>
            <button id="search-btn">坐标反查</button>
            <span style="margin-left:50px;">
                <button onclick="normalMap();">地图</button>
                <button onclick="earchMap();">卫星</button>
            </span>
        </span>
    </div>
</div>

<span id="fork-on-coding">
        <a href="https://coding.net/u/for/p/xmap/git">Fork me on Coding</a>
    </span>

<script>
    $(function () {
        $("#penColor").spectrum({
            preferredFormat: "hex",
            color: "#f00"
        });
        $("#brush").spectrum({
            preferredFormat: "hex",
            allowEmpty: true
        });
    });
</script>
</body>
</html>